<template>
    <div class="app-container">
      <el-form :inline="true" :model="queryParams" ref="queryForm" class="demo-form-inline">
        <el-form-item label="资产名称">
            <el-select v-model="queryParams.asseId" clearable>
                <el-option v-for="item in temaList" :key="item.key" :disabled="isApproved" :value="item.id" :label="item.asseName"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="领用日期">
            <el-date-picker clearable
                v-model="queryParams.ascoCollectTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="领用人">
            <el-input v-model="queryParams.ascoCollectUserName" clearable></el-input>
        </el-form-item>
        <el-form-item label="申请状态">
            <el-select v-model="queryParams.ascoCollectStatus" clearable>
                <el-option value="0" label="待审核"></el-option>
                <el-option value="1" label="通过"></el-option>
                <el-option value="2" label="不通过"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList" size="small" icon="el-icon-search">查询</el-button>
          <el-button  @click="reset" size="small" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >创建教材领用</el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="bclassList" >
        <el-table-column label="资产名称" align="center" prop="asseName" :show-overflow-tooltip="true" >
        </el-table-column>
        <el-table-column label="资产编号" align="center" prop="asseCode" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="领用时间" align="center" prop="ascoCollectTime" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
                <span v-if="scope.row.ascoCollectTime!= null">
                    {{ parseTime(scope.row.ascoCollectTime ) }}
                </span>
            </template>
        </el-table-column>
        <el-table-column label="领用数量" align="center" prop="ascoCollectCount" :show-overflow-tooltip="true" >
        </el-table-column>
        <el-table-column label="申领人名称"  align="center" prop="ascoCollectUserName" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="审核状态" align="center" prop="ascoCollectStatus" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.ascoCollectStatus == 2" type="warning">不通过</el-tag>
            <el-tag v-if="scope.row.ascoCollectStatus == 1" type="success">通过</el-tag>
            <el-tag v-if="scope.row.ascoCollectStatus == 0" type="info">待审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审核人名称"  align="center" prop="ascoExamineUserName" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="审核时间"  align="center" prop="ascoExamineTime" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <span v-if="scope.row.ascoExamineTime!= null">
                    {{ parseTime(scope.row.ascoExamineTime ) }}
                </span>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button size="mini" circle type="primary" v-if="scope.row.examineBtmRight && scope.row.ascoCollectStatus==0" icon="el-icon-edit" @click="handleApproced(scope.row)"  title="审核"/>
            </template>
        </el-table-column>

      </el-table>
  
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
      <!-- 添加或修改参数配置对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="50%" >
        <el-form ref="collectFormData" :model="collectFormData" :rules="roles" label-width="100px" v-loading="dialogLoading">
            <el-row v-if="isApproved">
                <el-col :span="12">
                <el-form-item label="领用人">
                    {{collectFormData.ascoCollectUserName}}
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="领用时间">
                    {{collectFormData.ascoCollectTime}}
                </el-form-item>
                </el-col>
            </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="资产名称" prop="asseId">
                <el-select v-model="collectFormData.asseId" :disabled="isApproved">
                    <el-option v-for="item in temaList" :key="item.key"  :value="item.id" :label="item.asseName"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
               <el-col :span="12">
              <el-form-item label="领用数量" prop="ascoCollectCount">
                <el-input-number v-model="collectFormData.ascoCollectCount" :disabled="isApproved"  :min="1" :max="100" label="领用数量" size="small" ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="审核描述" v-if="isApproved">
                <el-input type="textarea" style="width: 89%;" :autosize="{ minRows: 3, maxRows: 6 }"  placeholder="请输入内容"
                    v-model="collectFormData.ascoExamineDesc">
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="!isApproved">
            <el-button type="primary" @click="submitForm">提 交</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
        <div slot="footer" class="dialog-footer" v-else>
            <el-button type="primary" @click="submitPass(1)">同 意</el-button>
            <el-button @click="submitPass(2)">不同意</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
    
    <script>
  import { collectPageList,collectExamine,collectAdd,teachingMaterialList} from "@/api/logistics/collect";
  export default {
    name: "BClass",
    data() {
      return {
        cxForm: {
          title: null,
        },
        dialogLoading:false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        stuCount: 0,
        // 字典表格数据
        bclassList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 班主任
        userOptions: [],
        // 状态数据字典
        statusOptions: [],
        // 班级所属部门
        classDeptOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        // 表单参数
        form: {
          sex: "1",
        },
        roles:{
            asseId:[
                { required: true, message: "请选择资产", trigger: "blur" },
            ],
            ascoCollectCount:[
                { required: true, message: "请填写领用数量", trigger: "blur" },
            ]
        },
        selectedList: [],
        isUpdate: false,
        temaList: [],
        collectFormData:{},
        isApproved:false,
        thisRow:{}
      };
    },
    created() {
      this.getList();
      this.getTemaList()
    },
    methods: {
        submitPass(flag){
            this.thisRow.ascoCollectStatus = flag
            this.$confirm('确认提交'+(flag==1?'通过':'不通过')+'吗?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(()=>{
                collectExamine(this.thisRow.id,this.thisRow).then(resp=>{
                    this.msgSuccess("提交成功");
                    this.open = false;
                    this.getList();
                })
            })
            
        },
        handleApproced(row){//教材领用审核

            this.isApproved = true
            this.thisRow = row
            this.collectFormData = row
            this.open = true;
            this.title = "教材领用审核";
        },
        getTemaList(){
            teachingMaterialList().then(resp=>{
                this.temaList = resp.data
            })
        },
      /** 查询班级列表 */
      getList() {
        this.loading = true;
        console.log(this.queryParams);
        collectPageList(this.queryParams).then((response) => {
          console.log(response);
          this.bclassList = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        });
      },
      dianj(row) {
        console.log(row);
        this.open = true;
        this.dialogLoading = true
        getNoticeSchool(row.id).then(resp=>{
          this.xqList=resp.data
          const context = resp.data.noticeContent.replace(/<img/gi,"<img width='100%'")
          this.xqList.noticeContent = context
          this.dialogLoading = false
        })
        row.status=1
        readyNotice({id:row.id}).then(resp=>{
        })
        
  
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.queryParams.temaId=null
        this.queryParams.tmcoCollectTime=null
        this.queryParams.tmsdCollectUserName=null
        this.queryParams.tmsdCollectStatus=null
        this.resetForm("queryForm");
        this.handleQuery()
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
  
        this.handleQuery();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.collectFormData={
            ascoCollectUserName:null,
            ascoCollectTime:null,
            asseId:null,
            ascollectCount:null,
            ascoExamineDesc:null
        };
        this.isApproved = false
        this.open = true;
        this.title = "创建教材领用";
        this.resetForm("collectFormData");

      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.open = true;
        this.isUpdate = true;
        this.form = row;
        this.form.locationPid = Number(row.locationPid);
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["collectFormData"].validate((valid) => {
          if (valid) {
            collectAdd(this.collectFormData).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("提交成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.message);
              }
            });
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        const param = {
          jobClassName: row.jobName,
          jobGroupName: row.jobGroupName,
        };
        this.$confirm('是否确认删除"' + row.jobName + '"任务吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return deletejob(param);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          })
          .catch(function () {});
      },
      handlePause(row) {
        //暂停
        const param = {
          jobClassName: row.jobName,
          jobGroupName: row.jobGroupName,
        };
        pausejob(param).then((resp) => {
          this.msgSuccess("暂停成功");
          this.getList();
        });
      },
      handleResume(row) {
        //恢复
        const param = {
          jobClassName: row.jobName,
          jobGroupName: row.jobGroupName,
        };
        resumejob(param).then((resp) => {
          this.msgSuccess("暂停成功");
          this.getList();
        });
      },
    },
  };
  </script>
  <style>
   .el-table .warning-row {
      background: oldlace;
    }
  </style>
  